<template>
    <el-form :inline="true" :model="assetInquiryForm" label-width="auto" class="form_inline">
        <el-row :gutter="20">
            <el-col :span="16">
                <el-form-item label="统计时间">
                    <el-date-picker
                        v-model="assetInquiryForm.dateRange"
                        type="datetimerange"
                        start-placeholder="Start date and time"
                        end-placeholder="End date and time"
                        clearable
                    />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="基金名称">
                    <el-input v-model="assetInquiryForm.fundName" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="基金类型">
                    <el-select v-model="assetInquiryForm.fundType" placeholder="请选择交易类型" clearable>
                        <el-option v-for="item in assetSourceTypes" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8" class="submit" :offset="8">
                <el-form-item>
                    <el-button type="primary" @click="onReset">重置</el-button>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>

    <el-table :data="paginatedData" style="width: 100%">
        <el-table-column prop="date" label="统计时间" />
        <el-table-column prop="source" label="来源" />
        <el-table-column prop="fundName" label="基金名称" />
        <el-table-column prop="code" label="基金代码" />
        <el-table-column prop="fundType" label="基金类型" />
        <el-table-column prop="principal" label="本金" />
        <el-table-column prop="lastFund" label="上期资金" />
        <el-table-column prop="curAsset" label="当前资金" />
        <el-table-column prop="firstHoldTime" label="首次持有" />
        <el-table-column prop="positionGain" label="持仓收益" />
    </el-table>
    <div class="paginationDiv">
        <el-pagination layout="prev, pager, next" :total="total" :page-size="pagesize" :current-page="currentPage" @current-change="handleCurrentChange" />
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, onMounted } from "vue";
import { getAssetListDataAPI } from "src/httpApi/assetHttp";
import { assetSourceTypes } from "@/constant/constant";

const tableData = ref<any[]>([]);

const search = ref(""); // 使用 ref() 包装
const pagesize = ref(10); // 指定展示多少条
const currentPage = ref(1); // 默认展示第几页
const total = ref(0);
const assetInquiryForm = reactive({
    dateRange: [], // 数组类型用于存储开始时间和结束时间
    fundName: "",
    fundType: "",
});

// 获取资金列表数据
const getAssetListData = async (params?: any) => {
    try {
        console.log("获取资金列表数据", params);
        
        const res = params ? await getAssetListDataAPI(params) : await getAssetListDataAPI();
        tableData.value = res.result; // 根据实际接口返回结构调整
        total.value = res.result.length;
    } catch (error) {
        console.error("获取文件记录数据失败:", error);
    }
};

// 计算过滤后的数据
const filteredData = computed(() => {
    return tableData.value.filter(
        (data: any) => !search.value || data.user.toLowerCase().includes(search.value.toLowerCase()) || data.tradeDescription.toLowerCase().includes(search.value.toLowerCase())
    );
});

// 计算分页后的数据
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pagesize.value;
    const end = currentPage.value * pagesize.value;
    return filteredData.value.slice(start, end);
});

// 处理页码变化
const handleCurrentChange = (val: number) => {
    currentPage.value = val;
};

// 重置表单字段为初始状态
const onReset = () => {
    assetInquiryForm.dateRange = [];
    assetInquiryForm.fundName = "";
    assetInquiryForm.fundType = "";
};

const onSubmit = () => {
    const params: any = {
        ...assetInquiryForm,
        startTime: new Date(assetInquiryForm.dateRange[0]).getTime(), // 转换为时间戳
        endTime: new Date(assetInquiryForm.dateRange[1]).getTime(), // 同样处理 endTime
    };
    delete params.dateRange;
    getAssetListData(params);
};

// 组件加载时自动请求数据
onMounted(() => {
    getAssetListData();
});
</script>

<style scoped>
.paginationDiv {
    width: 100%;
    display: flex;
    justify-content: right;
}

.form_inline .el-select {
    --el-select-width: 220px;
}
</style>
